<template>
  <view class="main-box">
    <load :show="show" :overlay="overlay" />
    <pagehead />
    <van-search
      v-model="searchContent"
      shape="round"
      background="#F5F8FC"
      show-action
      readonly
      placeholder="搜一搜"
      @focus="handleToSearch"
    >
      <template #action>
        <van-button
          round
          @click="handleToShelf"
          icon="http://foglake.sanye666.top/images/icon/shelf.png"
          type="primary"
          size="small"
        />
      </template>
    </van-search>
    <van-tabs v-model="activeName" sticky animated :lazy-render="false" @change="handleTabsChange">
      <van-tab v-for="item in typeList" :title="item.name" :name="item.id" :key="item.id">
        <van-pull-refresh
          v-model="contentFresh"
          @refresh="getList"
          pulling-text="下拉即可刷新"
          loosing-text="释放即可刷新"
          loading-text="正在加载小说"
        >
          <banner :type="item.id" :bannerList="bannerList" />
          <lazy-component>
            <div class="main-content">
              <platehead title="最近更新" :type="bookType+'类'" @refresh="handleRefresh" />
              <div :style="'min-height:'+ minHeight">
                <transition-group name="van-fade">
                  <van-row v-show="updateShow" type="flex" justify="start" :key="item.id">
                    <van-col v-for="item in updateList" :key="item.id" span="6">
                      <card
                        :name="item.name"
                        :writer="item.writer"
                        :id="item.id"
                        :image="item.image"
                      ></card>
                    </van-col>
                  </van-row>
                </transition-group>
              </div>
              <platehead title="系统推荐" :type="bookType+'类'" @refresh="handleRefresh" />
              <transition-group name="van-fade">
                <detailCard
                  v-for="item in recommendList"
                  :key="item.id"
                  :name="item.name"
                  :writer="item.writer"
                  :is_over="item.is_over"
                  :type="item.type"
                  :intro="item.intro"
                  :id="item.id"
                  :image="item.image"
                  v-show="recommendShow"
                />
              </transition-group>
              <platehead title="完本小说" :type="bookType+'类'" @refresh="handleRefresh" />
              <div>
                <transition-group name="van-fade">
                  <van-row
                    v-show="overShow"
                    type="flex"
                    justify="start"
                    :key="item.id"
                    class="over-list"
                  >
                    <van-col v-for="item in overList" :key="item.id" span="6">
                      <card
                        :name="item.name"
                        :writer="item.writer"
                        :id="item.id"
                        :image="item.image"
                      ></card>
                    </van-col>
                  </van-row>
                </transition-group>
              </div>
            </div>
          </lazy-component>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <div class="van-hairline--top"></div>
    <div class="bottom-line">人家是有底线的</div>
    <!-- <page-tabbar tabbarActive="index" :placeholder="true" /> -->
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import getSign from "@utils/sign";
import Banner from "@components/Banner";
import { getBookType } from "@api/common";
import { getSearchList } from "@api/list";
import { getUpdateList } from "@api/homepage";
import Platehead from "@components/Platehead";
import Card from "@components/Card";
import DetailCard from "@components/DetailCard";
import Load from "@components/Load";
import Pagehead from "@components/Pagehead";
import PageTabbar from "@components/PageTabbar";
export default {
  name: "Index",
  components: {
    Banner,
    Platehead,
    Card,
    DetailCard,
    Load,
    Pagehead,
    PageTabbar,
  },
  data() {
    return {
      typeList: [],
      activeName: 1,
      typeId: 1,
      searchContent: "",
      bannerList: [],
      updateList: [],
      recommendList: [],
      overList: [],
      updateShow: true,
      recommendShow: true,
      overShow: true,
      tabbarActive: "index",
      show: true,
      overlay: true,
      contentFresh: true,
    };
  },
  watch: {
    activeName() {
      this.getList();
    },
  },
  computed: {
    bookType() {
      for (const item of this.typeList) {
        if (item.id == this.typeId) {
          return item.name;
        }
      }
    },
    minHeight() {
      return Taro.pxTransform(670, 750);
    },
  },
  created() {
    this.getBookType();
    this.getList();
  },
  methods: {
    getBookType() {
      getBookType().then((res) => {
        res.data.bookType.forEach((item, index) => {
          res.data.bookType[index].name = item.name.slice(0, 2);
        });
        this.typeList = res.data.bookType;
      });
    },
    // 初始化列表
    async getList() {
      this.show = true;
      await this.getUpdataList();
      await this.getRecommendList();
      await this.getOverList();
      await this.getUpdateList();
      setTimeout(() => {
        this.show = false;
        this.overlay = false;
        this.contentFresh = false;
      }, 1000);
    },
    // 最近更新
    getUpdataList(page = 1) {
      this.updateShow = false;
      getSearchList({
        type: this.typeId,
        pageSize: 8,
        page,
        updateDay: 30,
      })
        .then((res) => {
          if (res.data.data.length >= 5) {
            this.updateList = res.data.data;
          }
          this.updateShow = true;
          return;
        })
        .catch((error) => {
          this.updateShow = true;
        });
    },
    // 系统推荐
    getRecommendList(page = 1) {
      this.recommendShow = false;
      getSearchList({ type: this.typeId, pageSize: 3, page })
        .then((res) => {
          if (res.data.data.length >= 3) {
            this.recommendList = res.data.data;
          }
          this.recommendShow = true;
          return;
        })
        .catch((error) => {
          this.recommendShow = true;
        });
    },
    // 完本小说
    getOverList(page = 1) {
      this.overShow = false;
      getSearchList({
        type: this.typeId,
        pageSize: 8,
        page,
        isOver: 2,
      })
        .then((res) => {
          if (res.data.data.length >= 8) {
            this.overList = res.data.data;
          }
          this.overShow = true;
          return;
        })
        .catch((error) => {
          this.overShow = false;
        });
    },
    // 轮播图
    getUpdateList() {
      getUpdateList({ type: this.type, pageSize: 4 })
        .then((res) => {
          this.bannerList = res.data.bookList.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 去书架
    handleToShelf(e) {
      Taro.navigateTo({
        url: "/pages/bookshelf/bookshelf",
      });
    },
    // 去搜索页
    handleToSearch(e) {
      Taro.navigateTo({
        url: "/pages/search/search",
      });
    },
    handleRefresh(data) {
      switch (data.title) {
        case "最近更新":
          this.getUpdataList(data.currentPage);
          break;
        case "系统推荐":
          this.getRecommendList(data.currentPage);
          break;
        case "完本小说":
          this.getOverList(data.currentPage);
          break;
        default:
          this.getList();
          break;
      }
    },
    // tab切换
    handleTabsChange(e) {
      this.typeId = e;
      // this.overlay = true;
      // this.show = true;
      // setTimeout(() => {
      //   this.overlay = false;
      //   this.show = false;
      // }, 1000);
    },
  },
};
</script>

<style>
.main-content {
  padding: 0 40px;
}
.over-list {
  margin-bottom: 48px;
}
.bottom-line {
  font-size: 20px;
  padding: 36px 0;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: rgba(6, 27, 65, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-box .van-overlay {
  z-index: 10;
}
</style>
